<template>
    <div class="app-container">
        <div class="filter-container">
            <el-select clearable v-model="listQuery.commId" placeholder="社区" @change="selectComm(listQuery.commId)">
                <el-option v-for="item in commList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.buildId" placeholder="楼宇" @change="selectBuild(listQuery.buildId)">
                <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <!-- {{listQuery.equipmentModelId}} -->
            <el-select clearable v-model="listQuery.unitId" placeholder="单元" @change="selectUnit(listQuery.unitId)">
                <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.floorId" placeholder="层" @change="selectFloor(listQuery.floorId)">
                <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-select clearable v-model="listQuery.roomId" placeholder="房间">
                <el-option v-for="item in roomList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.typeId" placeholder="设备类型">
                <el-option v-for="item in diaTypeList" :key="item.id" :label="item.typeName" :value="item.id">
                </el-option>
            </el-select>

            <el-button v-waves type="primary" icon="el-icon-plus" @click="addEquipment()">绑定新设备</el-button>
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </div>

        <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%">
            <el-table-column label="设备id" prop="typeId" width="70px" align="center" />
            <!-- <el-table-column label="注册时间" prop="registeredAt" align="center" /> -->
            <el-table-column label="设备类型" prop="typeName" align="center" />
            <el-table-column label="设备名称" prop="productName" align="center" />
            <el-table-column label="MAC地址" prop="macOrSnName" align="center" />
            <el-table-column label="关联位置" prop="buildName" align="center" />
            <el-table-column label="状态" prop="equipmentUseStatus" :formatter="stateFormat" align="center" />
            <el-table-column label="操作" align="center" width="500px">
                <template slot-scope="{ row }">
                    <el-button v-waves style="margin-left: 10px" type="primary" @click="edit(row.id)">编辑</el-button>
                    <el-button v-if="row.equipmentUseStatus == 4" v-waves style="margin-left: 10px" type="primary" @click="useOrStop(row.id, row.equipmentUseStatus)">启用</el-button>
                    <el-button v-else-if="row.equipmentUseStatus == 2" v-waves style="margin-left: 10px" type="primary" @click="useOrStop(row.id, row.equipmentUseStatus)">停用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

        <!-- 以下是绑定新设备的弹窗 -->
        <el-dialog :visible.sync="dialogAddEquipment" width="600px">
            <el-form ref="dataForm" :rules="rules" :model="equipment">
                <el-form-item :label-width="formLabelWidth" prop="equipmentTypeIdDialog">
                    <div>请选择绑定位置 :</div>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="commId">
                    <el-select v-model="equipment.commId" placeholder="社区" @change="selectCommDia(equipment.commId)">
                        <el-option v-for="item in commList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="buildId">
                    <el-select clearable v-model="equipment.buildId" placeholder="楼宇" @change="selectBuildDia(equipment.buildId)">
                        <el-option v-for="item in diaBuildList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="unitId">
                    <el-select clearable v-model="equipment.unitId" placeholder="单元" @change="selectUnitDia(equipment.unitId)">
                        <el-option v-for="item in diaUnitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="floorId">
                    <el-select clearable v-model="equipment.floorId" placeholder="层" @change="selectFloorDia(equipment.floorId)">
                        <el-option v-for="item in diaFloorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="roomId">
                    <el-select clearable v-model="equipment.roomId" placeholder="房间">
                        <el-option v-for="item in diaRoomList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth">
                    <div>请选择设备 :</div>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="eTypeId">
                    <el-select :disabled="isDisabled" v-model="equipment.eTypeId" placeholder="设备类型" @change="selectTypeDia(equipment.eTypeId)">
                        <el-option v-for="item in diaTypeList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="eNameId">
                    <el-select :disabled="isDisabled" v-model="equipment.eNameId" placeholder="设备名称" @change="selectNameDia(equipment.eNameId)">
                        <el-option v-for="item in diaNameList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="eModelId">
                    <el-select :disabled="isDisabled" v-model="equipment.eModelId" placeholder="设备型号" @change="selectModelDia(equipment.eModelId)">
                        <el-option v-for="item in diaModelList" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label-width="formLabelWidth" prop="macOrSn">
          <DictSelect
            v-model="equipment.macOrSn"
            placeholder="标识类型"
            type="mac-or-sn"
          />
        </el-form-item> -->

                <el-form-item :label-width="formLabelWidth" prop="eMac">
                    <el-input :disabled="isDisabled" style="width: 193px" v-model="equipment.eMac" placeholder="MAC地址" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item :label-width="formLabelWidth" prop="eRemarks">
                    <el-input style="width: 193px" v-model="equipment.eRemarks" placeholder="备注" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <div style="text-align: center" slot="footer" class="dialog-footer">
                <el-button type="primary" @click="diaLinkEquitBuildSub()">提 交</el-button>
                <el-button @click="dialogAddEquipment = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 以上是绑定新设备的弹窗 -->
    </div>
</template>

<script>
import {
    getList, //获取设备类型的list
    getTypesUsed,
    getProdUsed,
    getModelUsed,
    getMacOrSnUsed,
    linkEquitBuild,
    getOneDetail,
    useOrStop
} from "@/api/equipment/equipment.js";
import {
    communityTree,
    getBuiByParentId
} from "@/api/community/building/building.js";

import DatePicker from "@/components/DatePickerUser";
import waves from "@/directive/waves"; // Waves directive
import DictSelect from "@/components/DictSelect";
import LineChartVue from "../dashboard/admin/components/LineChart.vue";
export default {
    name: "EquipmentTable",
    directives: { waves },
    filters: {},
    components: {
        DictSelect
    },

    data() {
        return {
            tableKey: 0,
            list: [],
            total: 0,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                orderByField: "createdAt",
                orderBy: "desc",
                //社区id
                commId: "",
                buildId: "",
                unitId: "",
                floorId: "",
                roomId: ""
            },
            isDisabled: false,

            //搜索框内的相关数据
            commList: [], // 社区集合
            buildList: [], // 楼宇集合
            unitList: [], // 单元集合
            floorList: [], // 楼层集合
            roomList: [], //房间集合

            //dialog 内的相关数据,搜索框数据和dia互相不影响
            dialogAddEquipment: false,
            formLabelWidth: "120px",
            diaBuildList: [], // 楼宇集合
            diaUnitList: [], // 单元集合
            diaFloorList: [], // 楼层集合
            diaRoomList: [], //房间集合

            diaTypeList: [], //设备类型集合
            diaNameList: [],
            diaModelList: [],

            //绑定新设备的对象
            mkEquipment: {
                id: "",
                equipmentUseStatus: ""
            },
            equipment: {
                id: "",
                commId: "",
                buildId: "",
                unitId: "",
                floorId: "",
                roomId: "",

                eTypeId: "",
                eNameId: "",
                eModelId: "",
                eMac: "",
                eRemarks: "" //备注
            },
            //关于规则的
            rules: {
                commId: [
                    { required: true, message: "社区不能为空", trigger: "blur" }
                ],
                eMac: [
                    {
                        required: true,
                        message: "MAC地址不能为空",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        // 加载信息 获取设备类型
        this.getList();
        this.communityTree();
        this.getTypesUsed();
    },
    methods: {
        stateFormat(row) {
            //1: 未使用 2:使用中 3:已废弃 4:已停用
            var thisStatus = row.equipmentUseStatus;
            if (thisStatus == 1) {
                return "未使用";
            } else if (thisStatus == 2) {
                return "使用中";
            } else if (thisStatus == 3) {
                return "已废弃";
            } else if (thisStatus == 4) {
                return "已停用";
            }
        },
        // 停用或者启用
        useOrStop(id, status) {
            //赋值

            this.mkEquipment.id = id;
            if (status == 2) {
                this.mkEquipment.equipmentUseStatus = 4;
            } else if (status == 4) {
                this.mkEquipment.equipmentUseStatus = 2;
            }
            useOrStop(this.mkEquipment).then(() => {
                //获取新的消息
                this.getList();
            });
        },
        edit(id) {
            this.isDisabled = true;
            //清空规则
            this.dialogAddEquipment = true;
            this.clearForm();
            //获取数据详情
            getOneDetail(id).then(res => {
                //赋值
                //处理类型相关的
                var thisTypeId = res.typeId;
                var thisNameId = res.productId;
                var thisModelId = res.modelId;
                this.equipment.eTypeId = thisTypeId;
                this.equipment.eNameId = thisNameId;
                this.equipment.eModelId = thisModelId;
                this.equipment.eRemarks = res.remarks;
                this.equipment.eMac = res.macOrSnName;
                this.equipment.id = id;

                var tempArr = this.diaTypeList.filter(function(obj) {
                    return obj.id == thisTypeId;
                });
                if (tempArr.length > 0) {
                    this.diaNameList = tempArr[0].children;
                }

                var tempArrName = this.diaNameList.filter(function(obj) {
                    return obj.id == thisNameId;
                });
                if (tempArrName.length > 0) {
                    this.diaModelList = tempArrName[0].children;
                }

                var pidList = res.pidList; //返回来的数据
                var pidListSize = pidList.length;
                if (pidListSize > 0) {
                    //获取相关的数据
                    var thisCommId = pidList[0];
                    var thisBuildId = pidList[1];
                    var thisUnitId = pidList[2];
                    var thisFloorId = pidList[3];
                    var thisRoomId = pidList[4];

                    this.equipment.commId = thisCommId;

                    //赋值楼宇集合
                    var tempArr = this.commList.filter(function(obj) {
                        return obj.id == thisCommId;
                    });
                    if (tempArr.length > 0) {
                        this.diaBuildList = tempArr[0].children;
                    }
                    if (thisBuildId != undefined || thisBuildId != null) {
                        //
                        this.equipment.buildId = thisBuildId;
                        //赋值单元集合
                        var tempArr = this.diaBuildList.filter(function(obj) {
                            return obj.id == thisBuildId;
                        });
                        if (tempArr.length > 0) {
                            this.diaUnitList = tempArr[0].children;
                        }
                    }

                    if (thisUnitId != undefined || thisUnitId != null) {
                        //
                        this.equipment.unitId = thisUnitId;
                        //楼层
                        var tempArr = this.diaUnitList.filter(function(obj) {
                            return obj.id == thisUnitId;
                        });
                        if (tempArr.length > 0) {
                            this.diaFloorList = tempArr[0].children;
                        }
                    }

                    if (thisFloorId != undefined || thisFloorId != null) {
                        //
                        this.equipment.floorId = thisFloorId;
                        var tempArr = this.diaFloorList.filter(function(obj) {
                            return obj.id == thisFloorId;
                        });
                        if (tempArr.length > 0) {
                            this.diaRoomList = tempArr[0].children;
                        }
                    }

                    if (thisRoomId != undefined || thisRoomId != null) {
                        //
                        this.equipment.roomId = thisRoomId;
                        //楼层
                    }
                }
            });
        },

        diaLinkEquitBuildSub() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    linkEquitBuild(this.equipment).then(() => {
                        // 关闭 dialog 框
                        this.dialogAddEquipment = false;
                        //获取新的消息
                        this.getList();
                    });
                }
            });
        },

        // 绑定新设备按钮
        addEquipment() {
            this.dialogAddEquipment = true;
            this.clearForm();
            this.equipment.id = "";
            this.isDisabled = false;
            //this.diaTypeList = [];
            this.diaNameList = [];
            this.diaModelList = [];
        },

        //选择类别
        selectTypeDia(id) {
            //先清空下级的数据
            this.equipment.eNameId = "";
            this.equipment.eModelId = "";
            this.equipment.eMac = "";
            this.diaModelList = [];
            //获取数组里值为id 的
            var tempArr = this.diaTypeList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaNameList = tempArr[0].children;
            }
        },

        //选择产品
        selectNameDia(id) {
            this.equipment.eModelId = "";
            this.equipment.eMac = "";
            var tempArr = this.diaNameList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaModelList = tempArr[0].children;
            }
        },

        //选择型号
        selectModelDia(id) {
            //先清空下级的数据
            this.equipment.eMac = "";
        },

        //选择社区  dialog 里面的操作
        selectCommDia(id) {
            //根据父id 把子级选出来   ,,

            //先清空下级的数据
            this.equipment.buildId = "";
            this.equipment.unitId = "";
            this.equipment.floorId = "";
            this.equipment.roomId = "";

            this.diaUnitList = [];
            this.diaFloorList = [];
            this.diaRoomList = [];
            var tempArr = this.commList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaBuildList = tempArr[0].children;
            }
        },

        //选择楼宇  dialog 里面的操作
        selectBuildDia(id) {
            this.equipment.unitId = "";
            this.equipment.floorId = "";
            this.equipment.roomId = "";
            this.diaFloorList = [];
            this.diaRoomList = [];
            if (id == null || id == "") {
                this.diaUnitList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //先清空下级的数据
            var tempArr = this.diaBuildList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaUnitList = tempArr[0].children;
            }
        },

        //选择单元  dialog 里面的操作
        selectUnitDia(id) {
            this.equipment.floorId = "";
            this.equipment.roomId = "";
            this.diaRoomList = [];
            if (id == null || id == "") {
                //清除数据
                this.diaFloorList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //this.diaFloorList = [];
            var tempArr = this.diaUnitList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaFloorList = tempArr[0].children;
            }
        },

        //选择楼层  dialog 里面的操作
        selectFloorDia(id) {
            this.equipment.roomId = "";
            if (id == null || id == "") {
                //清除数据
                this.diaRoomList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //先清空下级的数据
            var tempArr = this.diaFloorList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.diaRoomList = tempArr[0].children;
            }
        },

        // 选择社区
        selectComm(id) {
            this.listQuery.buildId = "";
            this.listQuery.unitId = "";
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.unitList = [];
            this.floorList = [];
            this.roomList = [];
            if (id == null || id == "") {
                this.buildList = [];

                return;
            }
            //根据父id 把子级选出来   ,,
            //this.buildList = [];
            var tempArr = this.commList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.buildList = tempArr[0].children;
            }
        },

        //选择楼宇
        selectBuild(id) {
            this.listQuery.unitId = "";
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.floorList = [];
            this.roomList = [];
            if (id == null || id == "") {
                this.unitList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //先清空下级的数据
            var tempArr = this.buildList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.unitList = tempArr[0].children;
            }
        },

        //选择单元
        selectUnit(id) {
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.roomList = [];
            if (id == null || id == "") {
                this.floorList = [];
                return;
            }
            //根据父id 把子级选出来   ,,

            //先清空下级的数据

            var tempArr = this.unitList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.floorList = tempArr[0].children;
            }
        },

        //选择楼层
        selectFloor(id) {
            //先清空下级的数据
            this.listQuery.roomId = "";
            this.listQuery.roomId = "";
            if (id == null || id == "") {
                this.roomList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            var tempArr = this.floorList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.roomList = tempArr[0].children;
            }
        },
        //加载首页数据
        getList() {
            getList(this.listQuery).then(response => {
                this.list = response.list;
                this.total = response.totalCount;
            });
        },

        // 获取自己的社区列表
        communityTree() {
            communityTree().then(response => {
                this.commList = response;
            });
        },

        getTypesUsed() {
            getTypesUsed().then(response => {
                this.diaTypeList = response;
            });
        },

        //清空表单  数据和校验规则 都得清除
        clearForm() {
            //清空规则
            this.$nextTick(() => {
                this.$refs["dataForm"].clearValidate();
                this.$refs["dataForm"].resetFields();
                this.diaBuildList = [];
                this.diaUnitList = [];
                this.diaFloorList = [];
                this.diaRoomList = [];
            });
        },

        handleFilter() {
            this.listQuery.pageNo = 1;
            this.getList();
        }
    }
};
</script>
